// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
@import 'includes/base';
@import 'includes/dark-mode';
@import 'includes/mofo-donate-cta';

// * -------------------------------------------------------------------------- */
// Main content
.wnp-content-main {
    color: $color-black;
    padding: 0;
    text-align: center;

    & > .mzp-l-content {
        padding-top: $layout-sm;
        padding-bottom: $layout-sm;
    }

    @media #{$mq-tall} {
        padding-top: $layout-md;
        margin-bottom: $layout-lg;

        & > .mzp-l-content {
            padding-top: $layout-lg;
            padding-bottom: $layout-lg;
        }
    }
}

.wnp-main-title {
    @include text-title-md;
    color: $title-text-color;

    @supports (--css: variables) {
        color: var(--title-text-color);
    }
}

.c-nimbus-128-title {
    @include text-title-xl;
}

.wnp-main-tagline {
    @include text-body-lg;
}

.qr-wrapper {
    position: relative;
    margin: $spacing-lg auto;
    width: 210px;
    height: 315px;
    background: transparent url('/media/img/firefox/whatsnew/qr-wrapper-foxphone.svg') center top no-repeat;
    background-size: 210px 315px;

    .qr-code {
        position: absolute;
        left: 50%;
        top: 118px;
        margin-left: -90px;
    }

    &.variant-b {
        width: 236px;
        height: 342px;
        background: transparent url('/media/img/firefox/whatsnew/qr-wrapper-foxphone-spring.svg') center top no-repeat;
        background-size: 236px 342px;

        .qr-code {
            top: 144px;
            margin-left: -93px;
        }
    }
}

.mobile-download-buttons li {
    padding-top: $spacing-sm;
    display: inline-block;
}

// * -------------------------------------------------------------------------- */
// For dark mode
@media (prefers-color-scheme: dark) {
    .wnp-main-title,
    .wnp-main-tagline {
        color: $title-text-color-inverse;

        @supports (--css: variables) {
            color: var(--title-text-color-inverse);
        }
    }
}
